<template>
  <el-drawer v-model="drawer" :size="size" :title="title">
    <div class="main">
      <slot></slot>
    </div>
    <div class="footer">
      <el-button type="primary" :loading="loading" @click="submit()">确定</el-button>
      <el-button @click="close()">取消</el-button>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref } from 'vue';
interface Props {
  title: string;
  size: string;
}
withDefaults(defineProps<Props>(), {
  size: '50%',
  title: '标题'
});
//触发父级事件
const emit = defineEmits(['onSubmit']); //定义一个变量来接收父组件传来的方法
const submit = () => {
  emit('onSubmit');
};
const drawer = ref<boolean>(false);
const loading = ref(false);
const open = () => {
  drawer.value = true;
};
const close = () => {
  drawer.value = false;
};
// 暴露方法给父级
defineExpose({
  open,
  close,
  loading
});
</script>

<style scoped>
.main {
}

.footer {
  height: 60px;
  line-height: 60px;
}
</style>
